<template>
    <div>
        <h3 style="color: #0fd59d; margin-left: 10px">FastJSON代码生成</h3>
        <div style="display: inline-block; width: 42%; float: left; margin-left: 10px;">

            <el-input
                    type="textarea"
                    :rows="40"
                    placeholder="请输入JSON数据..."
                    v-model="json"
            >
            </el-input>
        </div>
        <div style="height: 850px; width: 100px; float: left; margin-left: 30px;">
            <el-button type="primary" style="margin-top: 400px;" @click="generate"> => 转换</el-button>
        </div>

        
             <el-input
                    style="height: 850px; width: 42%; float: left; margin-left: 30px; "
                    type="textarea"
                    :rows="40"
                    placeholder="待生成的fastjson代码"
                    v-model="code"
                    readonly=""
            >
            </el-input>
    </div>
</template>

<script>
import { generateCode } from '@/apis/fastjson'

export default {
  data() {
    return {
        json: '',
        code: ''
    }
  },
  methods: {
    generate(){
        if (this.json == ''){
            this.$message({
                message: '请输入json！',
                type: 'warning'
            });
            return;
        }
        generateCode(this.json).then(res => {
            this.$message({
                message: '转换成功',
                type: 'success'
            });
            this.code = res.data.code;
        })
    }
  },
}
</script>
